<template>
  <div class="patTable px-5 py-4 bg-white">
    <HeadTitle text="患者管理"/>
    <div class="flex">
      <span
        v-for="(item, index) in report"
        :key="index"
        :class="[index == queryParams.visitStatus ? 'pat_Active' : '', 'pat_item']"
        @click=";(queryParams.visitStatus = index), getList(), usePatient.setVisitStatus(index)"
      >{{ item }}</span
      >
    </div>
    <!-- 搜索 -->
    <div class="mt-5 l-t-search">
      <div class="l-t-s-input">
        <el-input v-model="queryParams.keyWord" placeholder="证件号/就诊号/名字" prefix-icon="search" clearable
                  @clear="getList">
          <template #append>
            <div @click="getList" class="cursor-pointer">搜索</div>
          </template>
        </el-input>
      </div>
      <div class="l-t-s-batch-print-icon" title="打印">
        <svg v-if="!batchDisabled" @click="printShow = true" aria-hidden="true" class="print w-6 h-6">
          <use xlink:href="#icon-print"/>
        </svg>
        <svg v-if="batchDisabled" aria-hidden="true" class="print w-6 h-6">
          <use xlink:href="#icon-print-gay"/>
        </svg>
      </div>
    </div>
    <!-- 表格 -->
    <div class="mt-3 w-full">
      <Table
        :column="tableColumn"
        :table-data="patientList"
        :option="option"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <template #btn>
          <span class="fill">填写诊断</span>
        </template>
      </Table>
    </div>
  </div>

  <el-dialog v-model="printShow" title="选择打印报告" width="500px" :close-on-click-modal="false">
    <div>报告项目：</div>
    <el-checkbox-group v-model="printCheckList">
      <el-checkbox label="sleep">睡眠</el-checkbox>
      <el-checkbox label="spo2">血氧</el-checkbox>
      <el-checkbox label="heart">心率</el-checkbox>
      <el-checkbox label="breathe">呼吸</el-checkbox>
    </el-checkbox-group>

    <el-divider></el-divider>
    <!-- 选择日期 -->
    <div style="margin: 20px 0 5px 0;">报告日期：</div>
    <div class="report-time">
      <div>
        <el-date-picker v-model="timeDay" type="date" value-format="YYYY-MM-DD" placeholder="选择时间" style="width: 150px" @change="handleChangeTime(2)"/>
        <span :class="[isDay ? 'rep_Active' : '', 'rep_item mr-6 text-xs']" @click="handleChangeTime(1)">今日</span>
      </div>
    </div>

    <span slot="footer">
      <el-button type="primary" @click="print">确 定</el-button>
      <el-button @click="printShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script setup lang="ts">
import {listPatient} from '@/api/patient'
import {reactive, ref, toRefs} from 'vue'
import {usePatientStore} from '@/store/modules/patient'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
import {getDay} from "@/utils";

const route = useRoute()
const usePatient = usePatientStore()

const report = ref(['就诊中', '已结束'])

// 批量打印患者报告
const batchDisabled = ref(true)
const ids: any = ref([])
const printShow = ref(false)
const printCheckList = ref(['sleep', 'spo2', 'heart', 'breathe'])
const router = useRouter()

//表格配置
const tableColumn = [
  {type: 'selection'},
  {prop: 'patientName', label: '姓名', align: 'center', width: '80'},
  {prop: 'identityNumber', label: '身份证', align: 'center', width: '180'},
  {
    label: '操作',
    align: 'center',
    slot: 'btn',
    width: '100'
  }
] as Table.Column[]

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    visitStatus: 0, //0=就诊中；1=已完成
    keyWord: ''
  }
})
const {queryParams} = toRefs(data)

interface State {
  patientList: []
  option: Table.Option
}

const state = reactive<State>({
  patientList: [],
  option: {
    loading: false,
    showPagination: true,
    height: 580,
    highlight: true,
    paginationConfig: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pagerCount: 3,
      layout: 'total, sizes, prev, pager, next ',
      small: true
    }
  }
})
const {patientList, option} = toRefs(state)

const getList = async () => {
  await listPatient(queryParams.value).then((res: any) => {
    patientList.value = res.rows
    //有患者才会存
    if (patientList.value.length > 0) {
      setCurrentPatient(0)
    }
    if (option.value.paginationConfig) {
      option.value.paginationConfig.total = res.total
    }
  })
}

//点击表格行
const handleRowClick = (row) => {
  setCurrentPatient(row.index)
}
//储存当前患者信息
const setCurrentPatient = (idx: number) => {
  usePatient.setCurrentPatient(patientList.value[idx])
}
/** 分页*/
const handleCurrentChange = (pageNum: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.currentPage = pageNum
    queryParams.value.pageNum = pageNum
  }
  getList()
}

/** 分页*/
const handleSizeChange = (pageSize: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.pageSize = pageSize
    queryParams.value.pageSize = pageSize
  }
  getList()
}

//大屏带过来的
if (route.query.visitNoStr) {
  queryParams.value.keyWord = route.query.visitNoStr as string
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: any) => {
  ids.value = []
  selection.forEach((val) => {
    ids.value.push(val.visitNoStr)
  })
  batchDisabled.value = ids.value.length < 1 || ids.value.length > 10;
  if (ids.value.length > 10) {
    ElMessage.warning('一次性最多打印10份报告！')
  }
}

const isDay = ref(true)
const timeDay = ref()
type reportTimeType = {
  reportDate: string //报告日期
}
// 报告请求参数
const reportQueryTime: reportTimeType = {reportDate: ''}
// 选择时间
type ChangeTimeType = 1 | 2
const handleChangeTime = (type: ChangeTimeType) => {
  switch (type) {
    case 1:
      //选择今日
      isDay.value = true
      reportQueryTime.reportDate = getDay() //今日
      ;(timeDay.value = reportQueryTime.reportDate)
      break
    case 2:
      //选择单日
      if (timeDay.value) {
        isDay.value = false
        reportQueryTime.reportDate = timeDay.value
      } else {
        isDay.value = true
        reportQueryTime.reportDate = getDay() //今日
      }
      break
  }
}

// 跳转打印页面
const print = () => {
  if (printCheckList.value.length <= 0) {
    ElMessage.warning('请勾选报告！')
  } else {
    localStorage.setItem("dy", JSON.stringify(printCheckList.value));
    localStorage.setItem("visitNos", JSON.stringify(ids.value));
    localStorage.setItem("reportDate", reportQueryTime.reportDate);
    router.push({
      name: 'PrintPage',
    })
  }
}

getList()
</script>

<style scoped lang="less">
.patTable {
  width: 450px;
  height: 810px;
  border-radius: 6px;

  .pat_item {
    width: 88px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    color: #4e5969;
    cursor: pointer;
  }

  .pat_Active {
    background: #e8fff8;
    color: #00a991;
    transition: 0.8s;
  }
}
</style>
<style lang="less">
.patTable {
  .el-input .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
  }

  .el-input__wrapper {
    background-color: #f2f3f5;
  }

  .fill {
    color: var(--el-color-primary);
    font-size: 14px;
  }
}

.l-t-search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .l-t-s-input {
    width: 80%;
  }

  .l-t-s-batch-print-icon {
    cursor: pointer;
  }
}

.report-time {
  width: 100%;
  margin-bottom: 30px;

  .rep_item {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    margin-left: 10px;
  }

  .rep_Active {
    color: #00a991;
    font-weight: bold;
  }

  .title {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
